<template>
    <div style="padding: 10px;height:calc(100vh - 200px)" class="schedule">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['oa:sealApply:add']">添加日程安排</el-button>
            </el-col>
        </el-row>
        <FullCalendar ref="myCalendar" :options="calendarOptions" style="height:100%"/>









        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<!--                <el-form-item label="所属用户" prop="userId">-->
<!--                    <el-input v-model="form.userId" placeholder="请输入所属用户" />-->
<!--                </el-form-item>-->
                <el-form-item label="日程内容" prop="title">
                    <el-input v-model="form.title" type="textarea" :rows="5" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="开始时间" prop="start">
                    <el-date-picker clearable v-model="form.start" type="date" value-format="yyyy-MM-dd" placeholder="请选择开始时间"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" prop="end">
                    <el-date-picker clearable v-model="form.end" type="date" value-format="yyyy-MM-dd" placeholder="请选择结束时间"></el-date-picker>
                </el-form-item>
<!--                <el-form-item label="地址" prop="url">-->
<!--                    <el-input v-model="form.url" placeholder="请输入地址" />-->
<!--                </el-form-item>-->
                <el-form-item label="级别" prop="className">
                    <el-select v-model="form.className" placeholder="请选择级别">
                        <el-option
                            v-for="dict in levelList"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否可调整">
                    <el-radio-group v-model="form.editable">
                        <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio></el-radio-group>
                </el-form-item>
                <el-form-item label="是否提醒">
                    <el-radio-group v-model="form.ifAlert">
                        <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio></el-radio-group>
                </el-form-item>
                <el-form-item label="提醒方式" prop="alertType">
                    <el-select v-model="form.alertType" placeholder="请选择提醒方式">
                        <el-option
                            v-for="dict in dict.type.oa_schedule_notice_type"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button type="warning" v-if="!util.isEmpty(form.id)" @click="handleDelete(form.id)">删 除</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
import multiMonthPlugin, { Draggable } from '@fullcalendar/multimonth'

import {listOaSchedule,getOaSchedule,addOaSchedule, updateOaSchedule, delOaSchedule, listOaScheduleAll} from '@/api/oa/schedule'
export default {
    name: 'MaintenanceCalendarview',
    dicts: ['sys_yes_no', 'oa_schedule_notice_type'],
    components: {FullCalendar},
    data () {
        return {
            calendarOptions: {
                // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
                // plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin,multiMonthPlugin ],
                plugins: [ dayGridPlugin,multiMonthPlugin ],
                initialView: 'dayGridMonth', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
                firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
                locale: 'zh-cn', // 切换语言，当前为中文
                eventColor: '#3BB2E3', // 全部日历日程背景色
                // initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
                timeGridEventMinHeight: '20', // 设置事件的最小高度
                // aspectRatio: 1.5, // 设置日历单元格宽度与高度的比例。
                // displayEventTime: false, // 是否显示时间
                // allDaySlot: false, // 周，日视图时，all-day 不显示
                eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
                headerToolbar: { // 日历头部按钮位置
                    left: 'prev,next today',
                    center: 'title',
                    // right: 'multiMonthYear,dayGridMonth,timeGridWeek,timeGridDay listWeek',
                    right: 'multiMonthYear,dayGridMonth',
                },
                buttonText: {
                    today: '今日',
                    year: '年',
                    month: '月',
                    week: '周',
                    day: '日',
                    list: '周列表',
                    prev: "前",
                    next: "后"
                },
                // slotLabelFormat: {
                //     hour: '2-digit',
                //     minute: '2-digit',
                //     meridiem: false,
                //     hour12: false // 设置时间为24小时
                // },
                // eventLimitNum: { // 事件显示数量限制(本地测试未能生效)
                //     dayGrid: {
                //         eventLimit: 5
                //     },
                //     timeGrid: {
                //         eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
                //     }
                // },
                // 事件
                datesSet:this.dateChange,//日期切换的时候
                eventClick: this.handleEventClick, // 点击日历日程事件
                eventDblClick: this.handleEventDblClick, // 双击日历日程事件 (这部分是在源码中添加的)
                // eventClickDelete: this.eventClickDelete, // 点击删除标签事件 (这部分是在源码中添加的)
                // eventDrop: this.eventDrop, // 拖动日历日程事件
                // eventResize: this.eventResize, // 修改日历日程大小事件
                // select: this.handleDateSelect, // 选中日历格事件
                eventDidMount: this.eventDidMount, // 安装提示事件
                loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
                // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
                // eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
                // allowContextMenu: false,
                editable: true, // 是否可以进行（拖动、缩放）修改
                eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
                eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
                selectable: true, // 是否可以选中日历格
                selectMirror: true,
                selectMinDistance: 0, // 选中日历格的最小距离
                // dayMaxEvents: true,
                // weekends: true,
                // navLinks: true, // 天链接
                // selectHelper: false,
                // slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许


                //事件属性
                // id	可选，事件唯一标识，重复的事件具有相同的id
                // title	必须，事件在日历上显示的title
                // allDay	可选，true or false，是否是全天事件。
                // start	必须，事件的开始时间。
                // end	可选，结束时间。
                // url	可选，当指定后，事件被点击将打开对应url。
                // className	指定事件的样式。
                // editable	事件是否可编辑，可编辑是指可以移动, 改变大小等。
                // source	指向次event的eventsource对象。
                // color	背景和边框颜色。
                // backgroundColor	背景颜色。
                // borderColor	边框颜色。
                // textColor	文本颜色。
                // events: [{
                //     id:6,
                //     title: '你知道不？国庆节好像准备放10天假呢！！',
                //     start: '2023-09-18',
                //     end:'2023-09-30',
                //     editable:true,
                //     className:'level2'
                // }, {
                //     id:6,
                //     title: '下班前记得提醒女朋友喝水，我滴宝，一天没喝水了，心疼，嘤嘤嘤~~~',
                //     start: '2023-08-03',
                //     end:'2023-09-05',
                //     editable:false,
                //     className:'level5'
                // }]
                events:[]
            },
            levelList:[

                {"value":"level1","label":"级别1"},
                {"value":"level2","label":"级别2"},
                {"value":"level3","label":"级别3"},
                {"value":"level4","label":"级别4"},
                {"value":"level5","label":"级别5"},
            ],
            loading:false,
            queryParams:{
                // start:this.parseTime(new Date(),'{y}-{m}')+'-01',
                // end:this.parseTime(new Date(),'{y}-{m}')+'-30',
            },
            title:"",
            // 是否显示弹出层
            open: false,
            // 表单参数
            form: {
                ifAlert:'N',
                editable:'N',
                alertType:'1',
            },
            // 表单校验
            rules: {
                title: [
                    { required: true, message: "日程内容不能为空", trigger: "blur" }
                ],
                start: [
                    { required: true, message: "开始时间不能为空", trigger: "blur" }
                ],
                end: [
                    { required: true, message: "结束时间不能为空", trigger: "blur" }
                ],
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        eventMouseEnter (event, jsEvent, view) { // 鼠标划过的事件
            if (event.event.classNames.length) {
                // console.log(event)
            }
        },
        dateChange(da){
          console.log("切换日期")
          console.log(da)
        },
        handleEventClick(d,e){
            let id = d.event._def.publicId;
            this.handleUpdate(id);
        },
        handleEventDblClick(){
            console.log(222)
        },
        eventDrop (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
            console.log(event)
        },
        loadingEvent(d){
            console.log(4444)
            console.log(d)
        },
        eventDidMount(d){
            console.log(5555)
            console.log(d)
            // let start = this.parseTime(d.view.activeStart, '{y}-{m}-{d}');
            // let end = this.parseTime(d.view.activeEnd, '{y}-{m}-{d}');
            // this.queryParams.start = start;
            // this.queryParams.end = end;
            // this.getList();
        },
        getList(){
            if(!this.loading){
                this.loading = true;
                listOaScheduleAll(this.queryParams).then(res=>{
                    if(res.code==200){
                        let arr = res.data;
                        arr.forEach(item=>{
                            if(!item.url){
                                delete item.url;
                            }
                        })
                        this.calendarOptions.events = res.data;
                        this.loading = false;
                    }
                })
            }
        },





        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加日程安排";
        },
        /** 修改按钮操作 */
        handleUpdate(id) {
            this.reset();
            getOaSchedule(id).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改日程安排";
            });
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateOaSchedule(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addOaSchedule(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 删除按钮操作 */
        handleDelete(id) {
            this.$modal.confirm('是否确认删除该日程安排？').then(function() {
                return delOaSchedule(id);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('oa/oaSchedule/export', {
                ...this.queryParams
            }, `oaSchedule_${new Date().getTime()}.xlsx`)
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                userId: null,
                title: null,
                start: null,
                end: null,
                url: null,
                editable: "N",
                ifAlert: "N",
                alertType: '1',
                createTime: null,
                updateTime: null,
                createBy: null,
                updateBy: null
            };
            this.resetForm("form");
        },

    }
}
</script>
<style scoped>
.schedule /deep/.level0{
    background-color: #ff2222 !important;
}
.schedule /deep/.level1{
    background-color: #ff7777 !important;
}
.schedule /deep/.level2{
    background-color: #1c84c6 !important;
}
.schedule /deep/.level3{
    background-color: #20B2AA !important;
}
.schedule /deep/.level4{
    background-color: #67C23A !important;
}
.schedule /deep/.level5{
    background-color: #aaaaaa !important;
}
.schedule /deep/.fc{
    height: 100%;
}
.schedule /deep/.fc .fc-button{
    font-size: 14px;
}
</style>
